<template>
<div class="home">
  <h2>
    Home:{{$store.state.name}}
  </h2>
  <h2>
    level:{{$store.state.level}}
  </h2>
  <h2>
    avatar:{{$store.state.avatarURL}}
  </h2>

  <hr>
  <h2>
    Home:{{name}}
  </h2>
  <h2>
    level:{{level}}
  </h2>
  <h2>
    avatar:{{avatarURL}}
  </h2>
  <hr>
  <h2>
    sName:{{sName}}
  </h2>
  <h2>
    sLevel:{{sLevel}}
  </h2>
  <h2>
    sAvatarURL:{{sAvatarURL}}
  </h2>
</div>
</template>

<script>
import {mapState} from 'vuex'

export default{
  computed:{
    ...mapState(['name','level','avatarURL']),
    ...mapState({
      sName:state=>state.name,
      sLevel:state=>state.level,
      sAvatarURL:state=>state.avatarURL
    })
  }
}

</script>



<style scoped>

</style>